<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="数组的方法1https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array    静态方法fromArray.from() ​        从类数组对象或者可迭代对象中创建一个新的数组实例 ​        就是生成一个数组 isArrayArray.isArray() ​">
<meta property="og:type" content="article">
<meta property="og:title" content="数组的方法">
<meta property="og:url" content="http://tallgy.gitee.io/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="数组的方法1https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array    静态方法fromArray.from() ​        从类数组对象或者可迭代对象中创建一个新的数组实例 ​        就是生成一个数组 isArrayArray.isArray() ​">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-11-14T02:04:13.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.338Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="Array">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://tallgy.gitee.io/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/","path":"2021/11/14/JavaScript/方法/数组的方法/","title":"数组的方法"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>数组的方法 | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">1.</span> <span class="nav-text">数组的方法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">静态方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#from"><span class="nav-number">1.1.1.</span> <span class="nav-text">from</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#isArray"><span class="nav-number">1.1.2.</span> <span class="nav-text">isArray</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#of"><span class="nav-number">1.1.3.</span> <span class="nav-text">of</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95"><span class="nav-number">1.2.</span> <span class="nav-text">实例方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#concat"><span class="nav-number">1.2.1.</span> <span class="nav-text">concat</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#copyWithin"><span class="nav-number">1.2.2.</span> <span class="nav-text">copyWithin</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#entries"><span class="nav-number">1.2.3.</span> <span class="nav-text">entries</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#every"><span class="nav-number">1.2.4.</span> <span class="nav-text">every</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#fill"><span class="nav-number">1.2.5.</span> <span class="nav-text">fill</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#filter"><span class="nav-number">1.2.6.</span> <span class="nav-text">filter</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#find"><span class="nav-number">1.2.7.</span> <span class="nav-text">find</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#findIndex"><span class="nav-number">1.2.8.</span> <span class="nav-text">findIndex</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#flat"><span class="nav-number">1.2.9.</span> <span class="nav-text">flat</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#flatMap"><span class="nav-number">1.2.10.</span> <span class="nav-text">flatMap</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#forEach"><span class="nav-number">1.2.11.</span> <span class="nav-text">forEach</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#includes"><span class="nav-number">1.2.12.</span> <span class="nav-text">includes</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#indexOf"><span class="nav-number">1.2.13.</span> <span class="nav-text">indexOf</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#join"><span class="nav-number">1.2.14.</span> <span class="nav-text">join</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keys"><span class="nav-number">1.2.15.</span> <span class="nav-text">keys</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#lastIndexOf"><span class="nav-number">1.2.16.</span> <span class="nav-text">lastIndexOf</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#map"><span class="nav-number">1.2.17.</span> <span class="nav-text">map</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#pop"><span class="nav-number">1.2.18.</span> <span class="nav-text">pop</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#push"><span class="nav-number">1.2.19.</span> <span class="nav-text">push</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#reduce"><span class="nav-number">1.2.20.</span> <span class="nav-text">reduce</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#reduceRight"><span class="nav-number">1.2.21.</span> <span class="nav-text">reduceRight</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#reverse"><span class="nav-number">1.2.22.</span> <span class="nav-text">reverse</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#shift"><span class="nav-number">1.2.23.</span> <span class="nav-text">shift</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#slice"><span class="nav-number">1.2.24.</span> <span class="nav-text">slice</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#come"><span class="nav-number">1.2.25.</span> <span class="nav-text">come</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sort"><span class="nav-number">1.2.26.</span> <span class="nav-text">sort</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#splice"><span class="nav-number">1.2.27.</span> <span class="nav-text">splice</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toLocaleString-NaN"><span class="nav-number">1.2.28.</span> <span class="nav-text">toLocaleString</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toString-NaN"><span class="nav-number">1.2.29.</span> <span class="nav-text">toString</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#unshift"><span class="nav-number">1.2.30.</span> <span class="nav-text">unshift</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#values"><span class="nav-number">1.2.31.</span> <span class="nav-text">values</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#iterator"><span class="nav-number">1.2.32.</span> <span class="nav-text">iterator</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          数组的方法
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-14 10:04:13" itemprop="dateCreated datePublished" datetime="2021-11-14T10:04:13+08:00">2021-11-14</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/Array/" itemprop="url" rel="index"><span itemprop="name">Array</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="数组的方法"><a href="#数组的方法" class="headerlink" title="数组的方法"></a>数组的方法</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array</span><br></pre></td></tr></table></figure>



<h2 id="静态方法"><a href="#静态方法" class="headerlink" title="静态方法"></a>静态方法</h2><h3 id="from"><a href="#from" class="headerlink" title="from"></a>from</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from"><code>Array.from()</code></a></p>
<p>​        从类数组对象或者可迭代对象中创建一个新的数组实例</p>
<p>​        就是生成一个数组</p>
<h3 id="isArray"><a href="#isArray" class="headerlink" title="isArray"></a>isArray</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray"><code>Array.isArray()</code></a></p>
<p>​        用来判断某个变量是否是一个数组对象</p>
<h3 id="of"><a href="#of" class="headerlink" title="of"></a>of</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of"><code>Array.of()</code></a></p>
<p>​    根据一组参数来创建新的数组实例，支持任意的参数数量和类型</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Array.of(1, 4)</span><br><span class="line">[1, 4]</span><br></pre></td></tr></table></figure>



<h2 id="实例方法"><a href="#实例方法" class="headerlink" title="实例方法"></a>实例方法</h2><h3 id="concat"><a href="#concat" class="headerlink" title="concat"></a>concat</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat"><code>Array.prototype.concat()</code></a></p>
<p>​        用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a.concat(b)</span><br><span class="line">也可以使用下面这个方式进行合并。</span><br><span class="line">[...a, ...b]</span><br></pre></td></tr></table></figure>



<h3 id="copyWithin"><a href="#copyWithin" class="headerlink" title="copyWithin"></a>copyWithin</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin"><code>Array.prototype.copyWithin()</code></a></p>
<p>​        浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度</p>
<p>​        注意，这个是浅复制。</p>
<h3 id="entries"><a href="#entries" class="headerlink" title="entries"></a>entries</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries"><code>Array.prototype.entries()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator</code> 对象，该对象包含数组中每个索引的键/值对</p>
<p>​        Iterator 是一个迭代器，有的循环需要使用迭代器进行循环。</p>
<h3 id="every"><a href="#every" class="headerlink" title="every"></a>every</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every"><code>Array.prototype.every()</code></a></p>
<p>​        测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值</p>
<p>​        every里面有两个参数，一个是回调函数，一个是this的指向。</p>
<p>​        every里面是一个回调函数，然后回调函数的参数分别为 值，下标和原数组本身，然后会执行里面的方法，进行Boolean进行判断是否为true，只有所有的数组都为true才为true。</p>
<p>​        这里，为什么我会认为是使用的Boolean()来对返回值进行的判断呢。因为如果你 return []; 发现是true，但是如果你对 []==true 发现是false，所以他是使用的Boolean进行的判断。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">console.log(a.every((value, index, arr) =&gt; &#123;</span><br><span class="line">  return value == index;</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>

<p>​        简易实现：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Array.prototype.every = function (callback, thisArg) &#123;</span><br><span class="line">  let arr = this;</span><br><span class="line">  thisArg = thisArg || this;</span><br><span class="line">  for (const key in arr) &#123;</span><br><span class="line">    if (!Boolean(callback.call(thisArg, arr[key], key, arr))) &#123;</span><br><span class="line">      return false;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return true;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="fill"><a href="#fill" class="headerlink" title="fill"></a>fill</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill"><code>Array.prototype.fill()</code></a></p>
<p>​        用一个固定值填充一个数组中从起始索引到终止索引内的全部元素</p>
<p>​        有三个参数，第一个是必须的。三个参数分别是：填充值value，起始索引start，终止索引end。</p>
<h3 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code>Array.prototype.filter()</code></a></p>
<p>​        创建一个新数组, 其包含通过所提供函数实现的测试的所有元素</p>
<p>​        里面的参数也是一样，一个回调和一个this指向。</p>
<p>​        使用方式和上面的every一样，这个回调函数的作用是将返回true的加入一个数组，最后再将这个数组返回，常用于过滤条件。</p>
<h3 id="find"><a href="#find" class="headerlink" title="find"></a>find</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find"><code>Array.prototype.find()</code></a></p>
<p>​        返回数组中满足提供的测试函数的第一个元素的值。否则返回 <code>undefined</code></p>
<p>​        参数还是一样，一个回调一个this指向</p>
<p>​        会将第一个满足的尽心返回便结束，并不会返回一个数组，只是返回单个元素。 或者 undefined</p>
<h3 id="findIndex"><a href="#findIndex" class="headerlink" title="findIndex"></a>findIndex</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex"><code>Array.prototype.findIndex()</code></a></p>
<p>​        返回数组中满足提供的测试函数的第一个元素的<strong>索引</strong>。若没有找到对应元素则返回 <code>-1</code></p>
<p>​        同上 callback，thisArg</p>
<p>​        效果：返回通过的第一个的索引，或者 -1</p>
<h3 id="flat"><a href="#flat" class="headerlink" title="flat"></a>flat</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat"><code>Array.prototype.flat()</code></a></p>
<p>​        按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回</p>
<p>​        常用于数组的扁平化操作，参数是递归的深度。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let a = [1, 5, 2, [1], [[[[[[[[[2, 3]]]]]]]]]];</span><br><span class="line">console.log(a.flat(Infinity))</span><br><span class="line"></span><br><span class="line">[ 1, 5, 2, 1, 2, 3 ]</span><br></pre></td></tr></table></figure>



<h3 id="flatMap"><a href="#flatMap" class="headerlink" title="flatMap"></a>flatMap</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap"><code>Array.prototype.flatMap()</code></a></p>
<p>​        使用映射函数映射每个元素，然后将结果压缩成一个新数组</p>
<p>​        简单来说，就是先使用map生成一系列新的数组，然后再使用flat进行扁平化操作，记住是1层的扁平化。</p>
<h3 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach()</code></a></p>
<p>​        对数组的每个元素执行一次给定的函数</p>
<p>​        分别是回调函数和一个this指向。会对每个参数都执行一次里面的方法，没有返回值。</p>
<h3 id="includes"><a href="#includes" class="headerlink" title="includes"></a>includes</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes"><code>Array.prototype.includes()</code></a></p>
<p>​        判断一个数组是否包含一个指定的值，如果包含则返回 <code>true</code>，否则返回 <code>false</code></p>
<p>​        第一个是指定值，第二个是可选参数index</p>
<h3 id="indexOf"><a href="#indexOf" class="headerlink" title="indexOf"></a>indexOf</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf"><code>Array.prototype.indexOf()</code></a></p>
<p>​        返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 <code>-1</code></p>
<p>​        第一个是要查找的参数，第一个是从index值开始查找。包含index值</p>
<h3 id="join"><a href="#join" class="headerlink" title="join"></a>join</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>Array.prototype.join()</code></a></p>
<p>​        将一个数组的所有元素连接成一个字符串并返回这个字符串</p>
<p>​        参数是一个分隔符。默认是 ，</p>
<h3 id="keys"><a href="#keys" class="headerlink" title="keys"></a>keys</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys"><code>Array.prototype.keys()</code></a></p>
<p>​        返回一个包含数组中每个索引键的 <code>Array Iterator</code> 对象</p>
<h3 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="lastIndexOf"></a>lastIndexOf</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>Array.prototype.lastIndexOf()</code></a></p>
<p>​        返回指定元素在数组中的最后一个的索引，如果不存在则返回 <code>-1</code></p>
<p>​        第一个是要查找的元素，第二个是从此位置开始逆向查找。默认为数组的长度减 1(<code>arr.length - 1</code>)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移（-1就是最后一个位置。）。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let a = [0, 1, 2];</span><br><span class="line">console.log(a.lastIndexOf(0, 0))	//0</span><br><span class="line">console.log(a.lastIndexOf(2, -1))	//2</span><br></pre></td></tr></table></figure>



<h3 id="map"><a href="#map" class="headerlink" title="map"></a>map</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>Array.prototype.map()</code></a></p>
<p>​        返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值</p>
<p>​        第一个是回调函数，第二个是this指向。返回的是调用回调函数之后返回的结果组成的数组。</p>
<h3 id="pop"><a href="#pop" class="headerlink" title="pop"></a>pop</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a></p>
<p>​        从数组中删除最后一个元素，并返回该元素的值</p>
<p>​        是通过的length属性进行的操作，所以如果是在类数组上进行操作，没有length或者length不能转成数字则为0，并返回undefined。</p>
<h3 id="push"><a href="#push" class="headerlink" title="push"></a>push</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push"><code>Array.prototype.push()</code></a></p>
<p>​        将一个或多个元素添加到数组的末尾，并返回该数组的新长度</p>
<p>​        同上，使用的length。</p>
<h3 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce"><code>Array.prototype.reduce()</code></a></p>
<p>​        对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值</p>
<p>​        回调函数和一个初始值的参数，回调函数的参数分别为：累计值，当前值，下标和数组</p>
<p>​        行为简单来说就是，如果有初始值则取初始值，如果没有初始值那么便为0，这个初始值会作为回调函数的第一个参数，然后再调用数组进行循环，然后将值返回，用于下一次回调函数的初始值，常用于累加操作。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let a = [1, 2, 3];</span><br><span class="line">a.reduce((total, cur) =&gt; &#123;</span><br><span class="line">	return total + cur;</span><br><span class="line">&#125;, 0);</span><br><span class="line">//6</span><br></pre></td></tr></table></figure>

<p>​        回调函数第一次执行时，<code>accumulator</code> 和<code>currentValue</code>的取值有两种情况：如果调用<code>reduce()</code>时提供了<code>initialValue</code>，<code>accumulator</code>取值为<code>initialValue</code>，<code>currentValue</code>取数组中的第一个值；如果没有提供 <code>initialValue</code>，那么<code>accumulator</code>取数组中的第一个值，<code>currentValue</code>取数组中的第二个值。</p>
<h3 id="reduceRight"><a href="#reduceRight" class="headerlink" title="reduceRight"></a>reduceRight</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>Array.prototype.reduceRight()</code></a></p>
<p>​        接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值</p>
<p>​        和reduce差不多，就是这个是从右向左进行的操作。</p>
<h3 id="reverse"><a href="#reverse" class="headerlink" title="reverse"></a>reverse</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse"><code>Array.prototype.reverse()</code></a></p>
<p>​        将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组</p>
<h3 id="shift"><a href="#shift" class="headerlink" title="shift"></a>shift</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift"><code>Array.prototype.shift()</code></a></p>
<p>​        从数组中删除第一个元素，并返回该元素的值</p>
<h3 id="slice"><a href="#slice" class="headerlink" title="slice"></a>slice</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.prototype.slice()</code></a></p>
<p>​        提取源数组的一部分并返回一个新数组</p>
<p>​        第一个参数，起始值，默认0。第二个参数结束值。</p>
<p>​        不包含结束值，但是包含起始值</p>
<h3 id="come"><a href="#come" class="headerlink" title="come"></a>come</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some"><code>Array.prototype.some()</code></a></p>
<p>​        测试数组中是不是至少有一个元素通过了被提供的函数测试</p>
<p>​        同every，但是一个通过即可。</p>
<h3 id="sort"><a href="#sort" class="headerlink" title="sort"></a>sort</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>Array.prototype.sort()</code></a></p>
<p>​        对数组元素进行原地排序并返回此数组</p>
<p>​        默认是使用的字符串进行的排序，所以需要自己定义一个排序的形式。</p>
<p>​        参数可选，是一个回调函数<strong>compareFunction</strong>，代表了用于比较的元素。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">compareFunction(a, b) 小于0， 那么a会排到b之前。</span><br><span class="line">compareFunction(a, b) 等于0， 那么a和b的位置不会发生改变。</span><br><span class="line">compareFunction(a, b) 大于0， 那么b会排到a之前。</span><br></pre></td></tr></table></figure>



<h3 id="splice"><a href="#splice" class="headerlink" title="splice"></a>splice</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.prototype.splice()</code></a></p>
<p>​        通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容</p>
<p>​        参数：startIndex，开始的位置， deleteCount，要删除的个数，默认后面全部删除， item1，item2，要添加的元素。默认不添加。</p>
<h3 id="toLocaleString-NaN"><a href="#toLocaleString-NaN" class="headerlink" title="toLocaleString"></a>toLocaleString</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString"><code>Array.prototype.toLocaleString()</code></a></p>
<p>​        返回一个字符串表示数组中的元素。数组中的元素将使用各自的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString"><code>Object.prototype.toLocaleString()</code></a> 方法转成字符串</p>
<p>​        这个我没有看懂，好像是将数组的内容，按照区域或者类型的规则转换成特殊的字符串。</p>
<p>​        不会修改原数组。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var prices = [&#x27;￥7&#x27;, 500, 8123, 12];</span><br><span class="line">prices.toLocaleString(&#x27;ja-JP&#x27;, &#123; style: &#x27;currency&#x27;, currency: &#x27;JPY&#x27; &#125;);</span><br><span class="line"></span><br><span class="line">// &quot;￥7,￥500,￥8,123,￥12&quot;</span><br></pre></td></tr></table></figure>



<h3 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString"></a>toString</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString"><code>Array.prototype.toString()</code></a></p>
<p>​        返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a> 方法转成字符串</p>
<p>​        toString方法，没啥可说的。</p>
<h3 id="unshift"><a href="#unshift" class="headerlink" title="unshift"></a>unshift</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift"><code>Array.prototype.unshift()</code></a></p>
<p>​        将一个或多个元素添加到数组的头部，并返回该数组的新长度</p>
<p>下面这两个和迭代器相关，现在我没有学迭代器，代我们迭代器学了之后再进行了解。</p>
<h3 id="values"><a href="#values" class="headerlink" title="values"></a>values</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values"><code>Array.prototype.values()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator 对象</code>，该对象包含数组每个索引的值</p>
<p>​        返回的是一个迭代器的对象，iterator，使用forof进行循环可以取出值。</p>
<h3 id="iterator"><a href="#iterator" class="headerlink" title="iterator"></a>iterator</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator"><code>Array.prototype[@@iterator]()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator 对象</code>，该对象包含数组每个索引的值</p>
<p>​        </p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
              <a href="/tags/Array/" rel="tag"># Array</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/11/13/CSS/CSS%E4%BC%AA%E7%B1%BB%E5%92%8C%E4%BC%AA%E5%85%83%E7%B4%A0/" rel="prev" title="CSS伪类和伪元素">
                  <i class="fa fa-chevron-left"></i> CSS伪类和伪元素
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/11/14/JavaScript/%E9%9A%8F%E7%AC%94/%E8%BF%AD%E4%BB%A3%E5%99%A8/" rel="next" title="迭代器">
                  迭代器 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
